<template>
  <div class="banner_box">
    <van-swipe :autoplay="3000" @change="onChange">
      <van-swipe-item v-for="(item, index) in bannerList" :key="index" @click="jumpTo">
        <img :src="item" />
      </van-swipe-item>
    </van-swipe>
    <div class="page">
      <span>{{ index * 1 + 1 }}</span
      >/
      <span>{{ bannerList.length }}</span>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Swipe, SwipeItem } from "vant";

Vue.use(Swipe);
Vue.use(SwipeItem);
import { getList } from "../../apis/detail";
export default {
  name: "Banner",

  data() {
    return {
      bannerList: [],
      index:0
    };
  },

  mounted() {},

  methods: {
    onChange(index){
      this.index=index;
      // console.log(index)
    },
    jumpTo(){
      this.$router.push("/bannerListimg/"+this.$route.params.proid)
    }
  },
  created() {
    getList(this.$route.params.proid).then((data) => {
      // console.log(this.$route.params.proid)
      // console.log(data.data.data.banners[0].split(","));
      this.bannerList = data.data.data.banners[0].split(",");
    });
  },
};
</script>

<style  scoped>
.van-swipe {
  height: 3.5rem;
  margin-top: -0.46rem;
  position: relative;
}
img {
  width: 100%;
  height: 100%;
}
.banner_box {
  position: relative;
}
.page {
  height: 0.23rem;
  width: 0.45rem;
  background-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  bottom: 0.15rem;
  right: 0;
  border-radius: 0.1rem 0 0 0.1rem;
  padding-left: .05rem;
  padding-bottom: .1rem;
  color: #fff;
}
.page :nth-child(1){
  font-size: .20rem;
}
</style>